<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont">&#xe624;</span>
    </div>
    <div class="header-center">
      <span class="iconfont">&#xe651;</span>
      输出城市/景点/游玩主题
    </div>
    <div class="header-right">
      <router-link to="/city">
        {{city}} 
        <span class="iconfont">&#xf034e;</span>
      </router-link>
    </div>
  </div>
</template>


<script>
import { mapState } from 'vuex'

export default {
  name: 'Home',
  data () {
    return {
      
    }
  },
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style lang="less" scoped>
  .header {
    color: var(--fontcolor);
    width: 100%;
    line-height: 0.44rem;
    display: flex;
    background-color: var(--bascolor);
    align-items:center;

    .header-left {
      width: 0.2rem;
      padding: 0 0.1rem;
      text-align: center;
      font-weight: bold;
    }

    .header-center {
      flex: 1;
      border-radius: 0.05rem;
      color: #ccc;
      background-color: #fff;
      height: 0.3rem;
      line-height: 0.3rem;
      padding-left: 0.1rem;
    }

    .header-right {
      width: 0.6rem;
      font-size: 0.14rem;
      padding: 0rem 0.1rem;

      >a {
        color: #fff;
      }
    }
  }
</style>
